﻿<div bsModal #createOrEditModal="bs-modal" (onShown)="onShown()" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="createOrEditModal"
	aria-hidden="true" [config]="{backdrop: 'static'}">
	<div class="modal-dialog">

		<div class="modal-content">

			<form *ngIf="active" #roleForm="ngForm" novalidate (ngSubmit)="save()" autocomplete="off">

				<div class="modal-header">
					<button type="button" class="close" (click)="close()" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
					<h4 class="modal-title">
						<span *ngIf="role.id">{{l("EditRole")}}: {{role.displayName}}</span>
						<span *ngIf="!role.id">{{l("CreateNewRole")}}</span>
					</h4>
				</div>

				<div class="modal-body">
				    <tabset class="tab-container tabbable-line">
				        <tab heading="{{l('RoleProperties')}}">

				            <div class="form-group form-md-line-input form-md-floating-label">
				                <input #roleNameInput class="form-control edited" type="text" name="DisplayName" [(ngModel)]="role.displayName" required maxlength="64">
				                <label>{{l("RoleName")}}</label>
				            </div>
                            
				            <div class="md-checkbox-list">
				                <div class="md-checkbox">
				                    <input id="EditRole_IsDefault" class="md-check" type="checkbox" name="IsDefault" [(ngModel)]="role.isDefault">
				                    <label for="EditRole_IsDefault">
				                        <span class="inc"></span>
				                        <span class="check"></span>
				                        <span class="box"></span>
				                        {{l("Default")}}
				                    </label>
				                    <span class="help-block">{{l("DefaultRole_Description")}}</span>
				                </div>
				            </div>

				        </tab>
				        <tab heading="{{l('Permissions')}}">
				            <permission-tree #permissionTree></permission-tree>
				        </tab>
				    </tabset>
                    
                    <div class="note note-warning" style="margin-bottom: 0;">
                        <em>{{l('Note_RefreshPageForPermissionChanges')}}</em>
                    </div>
				</div>

				<div class="modal-footer">
					<button [disabled]="saving" type="button" class="btn btn-default" (click)="close()">{{l("Cancel")}}</button>
					<button type="submit" class="btn btn-primary blue" [disabled]="!roleForm.form.valid" [buttonBusy]="saving" [busyText]="l('SavingWithThreeDot')"><i class="fa fa-save"></i> <span>{{l("Save")}}</span></button>
				</div>

			</form>

		</div>
	</div>
</div>